<template>
  <a
    v-if="to"
    :href="linkUrl"
    :target="target"
    :class="classes"
    @click.exact="handleClickItem($event, false)"
    @click.ctrl="handleClickItem($event, true)"
    @click.meta="handleClickItem($event, true)"
    @mouseenter="handleMouseenter"
    :style="itemStyle"
  >
    <slot></slot>
  </a>
  <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle">
    <slot></slot>
  </li>
</template>
<script>
import Emitter from './emitter'
import { findComponentUpward } from '@/utils/assist'
import mixin from './mixin'
import mixinsLink from '@/mixins/link'

const prefixCls = 'ivu-menu'

export default {
  name: 'MenuItem',
  mixins: [Emitter, mixin, mixinsLink],
  props: {
    name: {
      type: [String, Number],
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      active: false
    }
  },
  computed: {
    classes () {
      return [
        `${prefixCls}-item`,
        {
          [`${prefixCls}-item-active`]: this.active,
          [`${prefixCls}-item-selected`]: this.active,
          [`${prefixCls}-item-disabled`]: this.disabled
        }
      ]
    },
    itemStyle () {
      return this.hasParentSubmenu && this.mode !== 'horizontal'
        ? {
          paddingLeft: 43 + (this.parentSubmenuNum - 1) * 24 + 'px'
        }
        : {}
    }
  },
  methods: {
    handleClickItem (event, new_window = false) {
      if (this.disabled) return

      // eslint-disable-next-line camelcase
      if (new_window || this.target === '_blank') {
        // 如果是 new_window，直接新开窗口就行，无需发送状态
        this.handleCheckClick(event, new_window)
        let parentMenu = findComponentUpward(this, 'Imenu')
        if (parentMenu) parentMenu.handleEmitSelectEvent(this.name)
      } else {
        let parent = findComponentUpward(this, 'submenu')
        if (parent) {
          this.dispatch('submenu', 'on-menu-item-select', this.name)
        } else {
          this.dispatch('Imenu', 'on-menu-item-select', this.name)
        }

        this.handleCheckClick(event, new_window)
      }
    },
    handleMouseenter (new_window = false) {
      let parent = findComponentUpward(this, 'submenu')
      if (parent) {
        this.dispatch('submenu', 'on-menu-item-select', this.name)
      } else {
        this.dispatch('Imenu', 'on-menu-item-select', this.name)
      }

      // eslint-disable-next-line no-undef
      this.handleCheckClick(event, new_window)
    }
    // handleMouseleave() {
    //   if (this.disabled) return;
    //   // if (this.mode === 'vertical') return;

    //   clearTimeout(this.timeout);
    //   this.timeout = setTimeout(() => {
    //     this.menu.updateOpenKeys(this.name);
    //     this.opened = false;
    //   }, 150);
    // }
  },
  mounted () {
    this.$on('on-update-active-name', name => {
      if (this.name === name) {
        this.active = true
        this.dispatch('submenu', 'on-update-active-name', name)
      } else {
        this.active = false
      }
    })
  }
}
</script>
<style lang="less">
.ivu-menu-item {
  padding-left: 26px;
  color: #9ea7b4;
}
.ivu-menu-item-active {
  background: #3e428f;
  color: #fff;
}
</style>
